import React ,{ Component , PropTypes } from 'react';

import {
    ScrollView,
    Image,
    Header,
    HeaderLayout
} from './../components';

import {
    connect,
    actions,
    Route
} from 'mirrorx';

import {listener} from './../common/util';

import styles from './../styles/musicList.style.scss';

export default class MusicList extends Component {

    constructor() {
        super();
        this.state = {
            detail:null
        }
    }

    componentDidMount() {
         setTimeout(()=>this.getData(),600)
    }

    getData(){
        const  { params } = this.props;
        Ajax.get({
            url:`/playlist/detail`,
            data:{ id:params.id }
        }).then( ({ playlist }) => {
            this.setState({
                detail:playlist
            });
        });
    }

    playMusic( item ){
        const { detail } = this.state;
        const  { params } = this.props;

        wyMusic.playMusic({
            target:this.getItem(item),
            list:detail.tracks.map(item => this.getItem(item))
        });
    }

    getItem (item) {
        return {
            id:item.id,
            name:item.name,
            ar:item.ar.map(ar=>ar.name).join("、"),
            picUrl:item.al.picUrl
        }
    }

    render(){
        const { detail } = this.state;
        return (
            <HeaderLayout title="歌单">
                {!!detail ? (
                    <ScrollView>
                        <div className={styles.music_list_page}>
                            <div className={styles.cover}>
                                <div className={styles.cover_top}>
                                    <div className={styles.cover_image}>
                                        <Image src={detail.coverImgUrl} />
                                    </div>
                                    <div className={styles.info}>
                                        <p className={styles.name}>
                                            {detail.name}
                                        </p>
                                        <div className={styles.flex_1} />
                                        <p className={styles.description}>
                                            简介：{detail.description}
                                        </p>
                                    </div>
                                </div>
                                <div className={styles.cover_bottom}>
                                    <div className={styles.like}>
                                        <i className={styles.like_icon} />
                                        <span>{detail.subscribedCount}</span>
                                    </div>
                                    <div className={styles.comment}>
                                        <i className={styles.comment_icon} />
                                        <span>{detail.commentCount}</span>
                                    </div>
                                    <div className={styles.share}>
                                        <i className={styles.share_icon} />
                                        <span>{detail.shareCount}</span>
                                    </div>
                                </div>
                            </div>
                            <ul className={styles.music_wrapper}>
                                {detail.tracks.map(( item ,i )=>{
                                    const { al , ar ,alia , name } = item;
                                    return (
                                        <li key={i} className={styles.music} onClick={()=>this.playMusic(item)}>
                                            <div className={styles.left}>
                                                <span>{i+1}</span>
                                            </div>
                                            <div className={styles.right}>
                                                <div className={styles.music_detail}>
                                                    <p className={styles.music_title}>
                                                        {`${name}${!!alia.length ? `（${alia.join(``)}）`:``}`}
                                                    </p>
                                                    <p className={styles.music_art}>
                                                        {ar.map(t=>t.name).join("、")}-
                                                        {al.name}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    )
                                })}
                            </ul>
                        </div>
                    </ScrollView>
                ):<div className="loading" />}
            </HeaderLayout>
        )
    }
}